<template>
    <div>
        <el-check-tag checked style="margin-right: 8px">历史记录</el-check-tag>
        <el-table :data="salesList" border style="width: 99%;height:30vh">
            <el-table-column align="center" width="160">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">项目类型</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    <el-text class="mx-1" size="small">{{ scope.row.projectType == null ? "无" : scope.row.projectType
                    }}</el-text>

                </template>
            </el-table-column>


            <el-table-column align="center" width="160">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">项目名称</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.projectName }}
                </template>
            </el-table-column>
            <el-table-column align="center" width="120">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">客户信息</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                        <template #default>
                            <div>
                                <el-tag class="mx-1" type="" effect="light" size="small">客&ensp;户&ensp;名&ensp;称&ensp;:
                                </el-tag>
                                <el-tag class="mx-1" type="" effect="light" size="small">{{ scope.row.custName == null ? "无"
                                    :
                                    scope.row.custName }} </el-tag>
                            </div>
                            <div>
                                <el-tag class="mx-1" type="" effect="dark" size="small"> 客户联系方式:</el-tag>
                                <el-tag class="mx-1" type="" effect="light" size="small">{{ scope.row.custPhone == null ?
                                    "无" :
                                    scope.row.custPhone }} </el-tag>
                            </div>
                            <div>
                                <el-tag class="mx-1" type="success" effect="dark" size="small">客&ensp;户&ensp;地&ensp;址&ensp;:
                                </el-tag>
                                <el-tag class="mx-1" type="success" effect="light" size="small">{{ scope.row.custAddress ==
                                    null ? "无" :
                                    scope.row.custAddress }} </el-tag>
                            </div>
                        </template>
                        <template #reference>
                            <el-tag>{{ scope.row.custName == null ? "无名称" : scope.row.custName }}</el-tag>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column align="center" sortable width="210" prop="estimatedStartTime">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">预测(启动~结束)时间</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.estimatedStartTime != null ? scope.row.estimatedStartTime.substring(0, 10) : '未定' }}
                    ~
                    {{ scope.row.estimatedEndTime != null ? scope.row.estimatedEndTime.substring(0, 10) : '未定' }}
                </template>
            </el-table-column>

            <el-table-column align="center" sortable prop="estAmount" width="120">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">预测金额</el-text>
                    <!-- <el-button :icon="estAmountEX?'Unock':'Lock'"/> -->
                    <el-row @click.stop="on_estAmountEX()" style="display:inline-block;">
                        <el-icon v-if="estAmountEX">
                            <Unlock />
                        </el-icon>
                        <el-icon v-else>
                            <Lock />
                        </el-icon>
                    </el-row>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ estAmountEX ? (scope.row.estAmount == null ? "" : scope.row.estAmount + '万元') : '***' }}
                </template>
            </el-table-column>



            <el-table-column align="center" sortable prop="isScheme" width="130">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">是否需要方案</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.isScheme ? '是' : '否' }}
                </template>
            </el-table-column>


            <el-table-column align="center" sortable prop="schemeTime" width="155">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">方案要求提交时间</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.schemeTime != null ? scope.row.schemeTime.substring(0, 10) : '未定' }}
                </template>
            </el-table-column>


            <el-table-column align="center" sortable prop="schemeActualTimes" width="155">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">方案实际提交时间</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.schemeActualTimes != null ? scope.row.schemeActualTimes.substring(0, 10) : '未定' }}
                </template>
            </el-table-column>


            <el-table-column align="center" prop="state" width="120" fixed="right">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">订单状态</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    <el-text v-if="scope.row.state == 1" class="mx-1" type="success">跟踪中</el-text>
                    <el-text v-else-if="scope.row.state == 2" class="mx-1" type="danger">丢单</el-text>
                    <el-text v-else-if="scope.row.state == 3" class="mx-1" type="info">客户取消</el-text>
                    <el-text v-else-if="scope.row.state == 4" class="mx-1" type="primary">已签订</el-text>
                    <el-text v-else class="mx-1" type="warning">无状态</el-text>
                </template>
            </el-table-column>

            <el-table-column align="center" prop="userName" width="120">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">制单人</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.userName }}
                </template>
            </el-table-column>

            <el-table-column align="center" prop="updUserName" width="120" fixed="left">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">修改人</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.updUserName }}
                </template>
            </el-table-column>

            <el-table-column align="center" prop="updUserName" width="170" fixed="left">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">修改时间</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    <el-date-picker size="small"  disabled v-model="scope.row.oriUpdateTime" type="datetime"
                        placeholder="Select date and time" />
                </template>
            </el-table-column>

            <el-table-column align="center" sortable prop="createTime" width="120">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">提交时间</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.createTime != null ? scope.row.createTime.substring(0, 10) : '未知' }}
                </template>
            </el-table-column>

            <el-table-column align="center" prop="trackingState" width="130">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">跟踪过程刷新</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.trackingState }}
                </template>
            </el-table-column>

            <el-table-column align="center" prop="remark" width="155">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">备注</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.remark }}
                </template>
            </el-table-column>

            <el-table-column align="center" sortable prop="schemeActualTimes" width="155">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">提交时间</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.schemeActualTimes != null ? scope.row.schemeActualTimes.substring(0, 10) : '未定' }}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script lang="ts" setup>
import { computed, ref, reactive, onMounted, watch, defineProps } from 'vue'
import api from '/@/api/sy/apiERP.js';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
const router = useRouter();
const props = defineProps(['param']);
// import { watch } from 'node:fs';

//搜索
const search = ref({
    salesALL: '',//整体模糊搜索
    projectType: '',//指定项目类型
    state: 0,//指定状态
    strTime: null,
    endTime: null,
    currentPage: 1,
    pageSize: 30,
})


function on_skipCode(val: string) {
    // alert(val)
    // router.push({
    //   path: "/sy/symb",
    //   query: { id: Math.random(), name: "vue-next-admin" },
    // });
    router.push({
        name: "sales_upd",
        params: { salesCode: val },
    });
}

// 搜索框state和projectType的筛选
const searchSelect = ref({
    projectType: [
        { label: 'WMS', value: 'WMS', },
        { label: 'MES', value: 'MES', },
        { label: 'AGV', value: 'AGV', },
        { label: 'SCADA', value: 'SCADA', },
        { label: 'SAP', value: 'SAP', },
        { label: '其它', value: '其它', },
        { label: '全部', value: '', },
    ],//指定项目类型
    state: [
        { label: '跟踪中', value: 1, },
        { label: '丢单', value: 2, },
        { label: '客户取消', value: 3, },
        { label: '已签单', value: 4, },
        { label: '全部', value: 0, },
    ],//指定状态
})

watch(search, (newVal, oldVal) => {
    salesShow()
}, { deep: true }) // 深层监控

//页数
let pageSizeMax = ref<number>(0)
const handleSizeChange = (val: number) => {
    search.value.pageSize = val
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    search.value.currentPage = val
    // console.log(`current page: ${val}`)
}
// 对象类型
interface interfaceSales {
    salesHistoryID: number | null
    salesID: number | null
    salesCode: String | null
    projectType: String | null
    projectName: String | null
    custName: String | null
    custPhone: String | null
    custAddress: String | null
    isScheme: boolean | null
    estAmount: number | null
    estimatedStartTime: Date | null
    estimatedEndTime: Date | null
    schemeTime: Date | null
    trackingState: String | null
    remark: String | null
    userName: String | null
    updUserName: String | null
    state: number | null
    updateTime: Date | null
    createTime: Date | null
    oriUpdateTime: Date | null
}
// 数组对象
let salesList = ref<interfaceSales[]>([])

// 获取数组对象
function salesShow() {
    api.post('public/sales/salesHistoryShow', { 'salesCode': props.param }).then((response: any) => {
        // 处理服务器返回的响应
        salesList.value = response.data.data.salesList
        pageSizeMax.value = response.data.data.pageSizeMax
        console.log(salesList);


    })
        .catch((error: any) => {
            //console.log(error);
            // 处理错误
        })
        .finally(() => {

        })

        ;
}


// 金额显示与隐藏
const estAmountEX = ref(false)
function on_estAmountEX() {
    estAmountEX.value = !estAmountEX.value
    // console.log(estAmountEX);

}

onMounted(() => {
     
    salesShow()
    // 在这里写逻辑
});

</script>
  